<template>
  <div>
    <el-card>
      <p style="font-size: 20px">个人信息修改</p>
      <el-form
        class="form-location"
        label-width="150px"
        :label-position="labelPosition"
        :model="admin"
        :rules="this.rules"
        ref="adminFormRef"
      >
        <el-form-item label="用户名" prop="name">
          <el-input class="input-size" v-model="admin.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input class="input-size" v-model="admin.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            class="input-size"
            type="password"
            v-model="admin.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password">
          <el-input
            class="input-size"
            type="password"
            v-model="admin.confirm"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :offset="14">
          <el-button type="success" style="width: 150px" @click="check()"
            >确定</el-button
          >
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: 'left',
      admin: {
        id: null,
        name: '',
        phone: '',
        password: '',
        confirm: '',
      },
      id: null,
      // 表单验证规则
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '请输入正确的手机号码',
          },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,

            message: '长度在 6 到 15 个字符',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    async edit() {
      const { data: res } = await this.$http.get('admin/own/edit', {
        params: {
          id: this.admin.id,
          name: this.admin.name,
          phone: this.admin.phone,
          p1: this.admin.password,
          p2: this.admin.confirm
        },
      })
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.$message.success('修改信息成功!')
    },
    async getAdmin() {
      const { data: res } = await this.$http.get('admin/' + this.id)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      var temp = res.data
      this.admin.id = temp.id
      this.admin.name = temp.name
      this.admin.phone = temp.phone
      this.admin.password = temp.password
      this.admin.confirm = temp.password
      console.log(this.admin)
    },
    getId() {
      this.id = this.$route.query.code
      console.log(this.id)
    },
    // 表单预验证
    check() {
      this.$refs.adminFormRef.validate((valid) => {
        if (valid) {
          if(this.admin.password !== this.admin.confirm) {
            return this.$message.error('两次输入密码不一致')
          }
          this.edit()
        } else {
          return this.$message.error('表单验证失败，请检查数据!')
        }
      })
    },
  },
  created() {
    this.getId()
    this.getAdmin()
  },
}
</script>

<style lang="less" scope>
.form-location {
  margin-left: 180px;
}

.input-size {
  width: 280px;
}
</style>